<template>
  
  <el-form :model="form" label-width="120px" class="wrap" v-loading="loading" element-loading-text="动画导出中...">
    
    <el-form-item label="工作网卡">
     {{form.broadCastInfo.netname}} - {{form.broadCastInfo.ip}}     
     <el-button @click="form.showNetworkInterfaces = true" type="primary" round class="btn-network">切换</el-button>
    </el-form-item>

    <el-form-item label="在线机器">
      <el-table :data="form.onlineList" row-class-name="row-table" ref="tableRef" border row-key="ip"  @current-change="handleCurrentChange" highlight-current-row style="width: 100%">
        <el-table-column prop="ip" label="ip" />
        <el-table-column prop="name" label="name" />
      </el-table>
    </el-form-item>

    <el-form-item label="文件选择">
      <div>
        <div>
          <el-button @click="selectFiles">选择</el-button>
          <el-button type="primary" @click="sendFiles">发送</el-button>
        </div>
        <div>
          <div v-for="v in form.fileList">{{v}}</div>
        </div>
      </div>
    </el-form-item>

    <el-form-item label="文件接收">
      <el-table :data="form.fileRecive" border row-key="fileName"  @current-change="handleCurrentChange" highlight-current-row style="width: 100%">
        <el-table-column label="进度" >
          <template #default="scope">
            {{ scope.row.transSize }} / {{ scope.row.size }}
            <span v-if="scope.row.end == 1">(成功)</span>
          </template>
        </el-table-column>
        <el-table-column label="速率">
          <template #default="scope">
            {{ scope.row.speed }}/s
          </template>
        </el-table-column>
        <el-table-column label="耗时">
          <template #default="scope">
            {{ scope.row.allTime }}s
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件" />
      </el-table>
    </el-form-item>
  </el-form>

  <network-interfaces @submit="onSelectNetWork" :list="form.networkInterfaces" :ip="form.broadCastInfo.ip" :show="form.showNetworkInterfaces"></network-interfaces>
</template>

<script lang="ts" setup>
  import { concat } from 'lodash';
  import { reactive, ref } from 'vue'
  import { ElTable } from 'element-plus'
  import NetworkInterfaces from './components/NetworkInterfaces.vue'

  const electronAPI = window.electronAPI
  const form = reactive({
    showNetworkInterfaces: false,
    selectIp:"",
    onlineList: [] as any[],
    networkInterfaces: [] as any[],
    fileList: [] as any[],
    fileRecive: [] as any[],
    broadCastInfo:  {
      ip: '',
      hostname:'',
      netname: ''
    },
    aminList:[] as any[],
  })

  let loading = ref(false)

  getBroadCastInfo()

  const tableRef = ref<InstanceType<typeof ElTable>>()
  electronAPI.onUpdateLink((_event, value) => {

    let arr = [] as any
    for (const key in value) {
      arr.push(value[key])
    }
    form.onlineList = arr
  })

  electronAPI.onUpdateFileRecive((_event, value) => {
    form.fileRecive = value
  })

  async function selectFiles() {
    const filePath = await electronAPI.selectFiles()
    console.log(filePath)
    if(filePath) {
      form.fileList = filePath
    }
  }

  async function sendFiles() {
    if (!form.selectIp) {
      alert('选择目标机器')
      return
    }
    if (form.fileList.length == 0) {
      alert('选择文件')
      return
    }


    let arr = concat([], form.fileList)
    console.log(form.selectIp)
    const filePath = await electronAPI.sendFiles({
      ip: form.selectIp,
      list: arr
    })
  }

  function getBroadCastInfo() {
    electronAPI.getBroadCastInfo()
    .then((data)=>{
      if (!data.broadCastInfo.ip) {
        setTimeout(getBroadCastInfo, 1000)
        return
      }
      form.broadCastInfo = data.broadCastInfo
      form.networkInterfaces = data.networkInterfaces
    })
  }

  function handleCurrentChange(data){
    if (data) {
      form.selectIp = data.ip
    } else {
       form.selectIp = ''
    }
  }

  function onSelectNetWork(data) {
    console.log(data)
    electronAPI.setBroadCastInfo(data)
    form.broadCastInfo.ip = data.ip
    form.broadCastInfo.netname = data.name
    form.showNetworkInterfaces = false
  }
  


</script>


<style>
  .wrap{
    width:900px; 
    margin:50px auto;
  }
  .row-table{
    cursor: pointer;
  }
  .btn-network{
    margin-left: 30px;
  }
</style>